<template>
	<div class="activityDetails">
		<!-- <djHeader v-if='top'></djHeader> -->
		<div class="box">
			<div class="activityBanner" v-if='Activity.gp'>
				<img v-if='Activity.gp.mBanner' :src="Activity.gp.mBanner" alt="" />
				<img v-else src="../../assets/images/info/dcbanner.jpg" alt="" />

			</div>
			<div class="p15">
				<div class="liuc"><img src="../../assets/images/info/lic.png" alt="" /></div>
				<div class="enrol-from">
					<!-- <div class="from-row">
						<input @focus="bottomStatus=false" @blur="bottomStatus=true" type="text" v-model="siginInfo.name" placeholder="请输入姓名" />
					</div>
					<div class="from-row">
						<input @focus="bottomStatus=false" @blur="bottomStatus=true" type="tel" v-model="siginInfo.mobile" placeholder="请输入联系电话" />
					</div>
					<div class="from-row">
						<select v-model="siginInfo.assemblyId">
							<option :value="item.assemblyId" v-for='item in Activity.apList'>{{item.assemblyPoint}}</option>
						</select>
					</div>
					<div class="mt10">
						<button type="button" class="btn-blcok btn-red" @click="subSiginUp">免费报名</button>
					</div> -->


					<!-- <div class="mt10 wbox jionlist f12 pr">
						<div class="wfl" v-if='Activity.memberEnrollList'>
							<i class="peopleIcon"></i> 已有<span class="red">{{Activity.gp.enrollAmount}}</span>人加入
						</div>
					</div> -->
						<!-- <rolling :notices='Activity.memberEnrollList'></rolling> -->
					<div class="mt10 wbox jionlist f12 pr">
            	<div class="">
								<i class="peopleIcon"></i> 已有<span class="red"></span>人加入
							</div>
						<ul class="box wfl" ref="gundongList" :class="{anim:animate==true}">
              <li>
                <span class="people_name">张**</span>
                <span class="gundong_phnoe">136000000</span> 报名成功
              </li>
               <li>
                <span class="people_name">张**</span>
                <span class="gundong_phnoe">136000000</span> 报名成功
              </li>
               <li>
                <span class="people_name">张**</span>
                <span class="gundong_phnoe">136000000</span> 报名成功
              </li>
               <li>
                <span class="people_name">张**</span>
                <span class="gundong_phnoe">136000000</span> 报名成功
              </li>
						</ul>
						<!-- <rolling :notices='Activity.memberEnrollList'></rolling> -->
					</div>
				</div>
			</div>
			<div class="safeguard">
				<img src="../../assets/images/info/jicai.jpg" alt="" />
			</div>
			<div class="mallGoodsList">
				<div class="activity-title">
					<span class="Tline"></span> 部分集采商品
					<span class="Tline"></span>
				</div>
				<div class="activity-sub-title">爆款不限量</div>
				<ul>
					<li v-for="item in Activity.mallGoodsList">
						<div class="mallItem">
							<div class="pr">
								<div class="A-coods-name">{{item.productName}}</div>
								<div class="A-goods-img"><img :src="item.goodsMPhoto" alt="" /></div>
							</div>
							<div class="p10">
								<div class="A-goods-merchandise f12 gary5">{{item.goodsDescription}}</div>
								<div class="A-goods-price f10 gary mt5">零售低价:{{item.marketPriceDesc}}</div>
								<div class="A-goods-coupons f10 gary mt5">优惠价 {{item.favourPriceDesc}}</div>
								<div class="A-goods-coupons f12  mt5 bold">集采价:<span class='f15 red'>{{item.discountPrice}}</span>{{item.unit}}</div>
								<button type="button" class="btn-blcok btn-red btn-sm mt10" @click="scrollTo">抢先预约</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="mallShopList">
				<div class="activity-title">
					<span class="Tline"></span> 集采商家
					<span class="Tline"></span>
				</div>
				<ul>
					<li v-for='item in Activity.mallShopList'>
						<img :src="item.shopMPhoto" alt="" />
					</li>
				</ul>
			</div>

			<div class="apList">
				<div class="activity-title">
					<span class="Tline"></span> 参团方式
					<span class="Tline"></span>
				</div>
				<dl>
					<dt>参团方式<span class="red">1</span> <span class="pl15"> 集合前往，空调大巴车免费接送</span></dt>
					<dd v-for='item in apListS'>
						{{item.assemblyPoint}}
					</dd>
				</dl>
				<dl>
					<dt>参团方式<span class="red">2</span><span class="peopleIcon pl15">自行前往</span></dt>
				</dl>
			</div>
			<div class="scheduleList">
				<ul>
					<li v-for='item in Activity.scheduleList'><img src="" alt="" /></li>
				</ul>
			</div>

			<div class="mcShopList">
				<div class="activity-title">
					<span class="Tline"></span> 主要集采卖场
					<span class="Tline"></span>
				</div>
				<ul v-if="cityName=='武汉'">
					<li>
						<img src="../../assets/images/info/hongqi.png" />
					</li>
					<li>
						<img src="../../assets/images/info/jiasheng.png" />
					</li>
					<li>
						<img src="../../assets/images/info/jinsheng.png" />
					</li>
					<li>
						<img src="../../assets/images/info/jinxing.png" />
					</li>
					<li>
						<img src="../../assets/images/info/meikailong.png" />
					</li>
					<li>
						<img src="../../assets/images/info/nanguo.png" />
					</li>
					<li>
						<img src="../../assets/images/info/ouyada.png" />
					</li>
					<li>
						<img src="../../assets/images/info/xiangjiang.png" />
					</li>
					<li>
						<img src="../../assets/images/info/youyiguoji.png" />
					</li>
				</ul>
				<ul v-if="cityName=='郑州'">
					<li>
						<img src="../../assets/images/info/fenghuangcheng.png" />
					</li>
					<li>
						<img src="../../assets/images/info/guomei.png" />
					</li>
					<li>
						<img src="../../assets/images/info/hongqi.png" />
					</li>
					<li>
						<img src="../../assets/images/info/juranzhijia.png" />
					</li>
					<li>
						<img src="../../assets/images/info/oukailong.png" />
					</li>
					<li>
						<img src="../../assets/images/info/xinjiaju.png" />
					</li>
				</ul>
				<ul v-if="cityName=='长沙'">
					<li>
						<img src="../../assets/images/info/juranzhijia.png" />
					</li>
					<li>
						<img src="../../assets/images/info/meikailong.png" />
					</li>
					<li>
						<img src="../../assets/images/info/ouyada.png" />
					</li>
					<li>
						<img src="../../assets/images/info/nanguodajiazhuang.png" />
					</li>
					<li>
						<img src="../../assets/images/info/wangdefu.png" />
					</li>
					<li>
						<img src="../../assets/images/info/xiyingmen.png" />
					</li>
				</ul>

				<div class="cate wbox">
					<span>集采品类</span>
					<div class="wfl">
						橱柜、木门、合金门、封阳台、淋浴房、隔断
					</div>
				</div>
			</div>
			<div class="activiy-about f14">
				<div class="about-title">我们是，{{cityName}}业主采购团</div>
				<div class="about-sub-title">500余次大型采购团，超100万人次参团</div>
				<div class="about-wrap">
					<p>一个人买东西太贵了！{{cityName}}业主采购团（大件会）团结{{cityName}}市50万装修业主，一起批发采购建材、家具、家电、汽车，5年来，已累计帮大家节省开支2亿多元！ 我们的宗旨是：团结所有业主，铲除一切暴利，让广大业主用更少的钱，买到更优质的商品。 </p>
					<p>我们的宗旨是：团结所有业主，铲除一切暴利，让广大业主用更少的钱，买到更优质的商品。</p>
				</div>
			</div>
		</div>
		<div v-if='bottomStatus' class="activityBtnWrap" :style="{bottom:height+'px'}">
			<button class="btn-blcok btn-red" @click="scrollTo">立即报名</button>
			<button v-if='!top' class="btn-blcok btn-dack" @click="callPhone">电话咨询</button>
			<a v-else class="btn-blcok btn-dack" href="tel:400-008-1717">电话咨询</a>
		</div>
	</div>
</template>
<script>
import { fetch } from "../../api/index";
import { statistics, encrypting } from "../../config";
import { Toast } from "mint-ui";
import BScroll from "better-scroll";
// import rolling from '../../components/gundong/index'
export default {
  name: "home",
  mounted() {
    this.$nextTick(function() {
      let inputs = document.getElementsByTagName("input");
      window.addEventListener("touchmove", function(e) {
        for (let i = 0; i < inputs.length; i++) {
          inputs[i].blur();
        }
        this.bottomStatus = false;
      });
    });
  },
  data() {
    return {
      Activity: {},
      siginInfo: {
        areaId: null,
        name: "",
        mobile: "",
        assemblyPoint: "",
        assemblyId: -1,
        gpId: null,
        source: 3
      },
      status: false,
      aplists: [],
      top: true,
      marq: true,
      height: null,
      sources: null,
      cityName: "",
      bottomStatus: true,
      apListS: [],
      reprotList: [],
      animate: true
    };
  },
  components: {
    // rolling
  },
  created() {
    let a = window.location.href;
    let b = a.split("?");
    if (b.length > 1) {
      let c = b[1].split("&");
      for (let i = 0, l = c.length; i < l; i++) {
        if (c[i].indexOf("areaId=") >= 0) {
          this.siginInfo.areaId = c[i].split("=")[1];
          this.status = true;
        }
        if (c[i].indexOf("sources=") >= 0) {
          this.sources = c[i].split("=")[1];
        }
        if (c[i].indexOf("height=") >= 0) {
          this.height = parseInt(c[i].split("=")[1]);
        }
      }
      if (this.sources == 1 || this.sources == 2) {
        this.top = false;
      }
    }
    if (!this.status) {
      let cityInfo = JSON.parse(localStorage.getItem("cityInfo"));
      if (cityInfo) {
        this.siginInfo.areaId = cityInfo.cityId;
        this.cityName = cityInfo.cityName;
      } else {
        this.siginInfo.areaId = 9;
        this.cityName = "武汉";
      }
    }
    this.siginInfo.gpId = this.$route.params.id;
    this.getActivityDetails();
    this.timer = setInterval(this.scroll, 2000); // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
  },
  beforeDestroy() {
    clearInterval(this.time);
  },

  methods: {
    scroll() {
      //   console.log(this.$refs)
      let gundongList = this.$refs.gundongList;
      gundongList.style.marginTop = "0px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.reprotList.push(that.reprotList[0]);
        that.reprotList.shift();
        gundongList.style.marginTop = "-30px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 1000);
    },
    scrollInit() {
      this.scrollA = new BScroll(this.$refs.wrapperA, {
        click: true,
        probeType: 3
      });
      //this.touchs()
    },
    async getActivityDetails() {
      let data = {
        gpId: 218
      };
      let res = await fetch("/api/gpInfo2", data);
      console.log(res);
      if (res.code == 200) {
        this.apListS = JSON.parse(JSON.stringify(res.obj.apList));
        this.Activity = res.obj;
        let data = {
          assemblyPoint: "请选择参团地址",
          assemblyId: -1
        };
        this.Activity.apList.unshift(data);
        //this.siginInfo.assemblyId = this.Activity.apList[0].assemblyId
        for (let i = 0; i < this.Activity.memberEnrollList.length; i++) {
          let name = this.Activity.memberEnrollList[i].memberName.substr(1);
          let mobile = this.Activity.memberEnrollList[i].mobile.substr(3, 4);
          this.Activity.memberEnrollList[
            i
          ].memberName = this.Activity.memberEnrollList[i].memberName.replace(
            name,
            "**"
          );
          this.Activity.memberEnrollList[
            i
          ].mobile = this.Activity.memberEnrollList[i].mobile.replace(
            mobile,
            "****"
          );
        }
        let that = this;
        this.$nextTick(function() {
          //						setTimeout(function(){
          //							that.scrollInit()
          //						},200)
        });
      }
    },
    scrollTo() {
      let btop = document.querySelector(".liuc").offsetTop;
      if (this.sources == 1 || this.sources == 2) {
        window.scrollTo(0, btop);
      } else {
        window.scrollTo(0, btop - 50);
      }
    },
    touchs() {
      this.scrollA.on("scroll", pos => {
        console.log(pos.y);
      });
    },
    callPhone() {
      if (this.sources == 1) {
        window.webkit.messageHandlers.callPhoneToIos.postMessage(null);
        return false;
        //ios电话
      } else if (this.sources == 2) {
        window.android.callPhone();
        return false;
        // 安卓电话
      }
    },
    async subSiginUp() {
      let mapkv = {
        活动名称: this.Activity.gp.name
      };

      statistics("活动报名", "活动详情页面报名1", mapkv);
      for (let i = 0; i < this.Activity.apList.length; i++) {
        if (this.Activity.apList[i].assemblyId == this.siginInfo.assemblyId) {
          this.siginInfo.assemblyPoint = this.Activity.apList[i].assemblyPoint;
        }
      }

      if (this.siginInfo.name == "") {
        Toast({
          message: "请输入姓名",
          position: "middle",
          duration: 2000
        });
      } else if (!/^1[34578]\d{9}$/.test(this.siginInfo.mobile)) {
        Toast({
          message: "请输入正确的手机号",
          position: "middle",
          duration: 2000
        });
      } else if (this.siginInfo.assemblyId == -1) {
        Toast({
          message: "请选择集合地点",
          position: "middle",
          duration: 2000
        });
      } else {
        for (let i = 0; i < this.Activity.apList.length; i++) {
          if (this.Activity.apList[i].assemblyId == this.siginInfo.assemblyId) {
            this.Activity.apList[
              i
            ].assemblyPoint = this.siginInfo.assemblyPoint;
          }
        }
        let res = await fetch("/api/dj17/enroll/signup", this.siginInfo);
        if (res.code == 200) {
          if (this.sources == 2) {
            window.android.siginSuccess();
          } else if (this.sources == 1) {
            window.webkit.messageHandlers.signSuccessToIos.postMessage(null);
          } else {
            this.$router.push({
              path: "/activity/sigInsuess"
            });
            //h5 成功报名
          }
        } else {
          Toast({
            message: res.msg,
            position: "middle",
            duration: 2000
          });
        }
      }
    }
  }
};
</script>

<style>
.activityDetails {
  background: #edf0f3;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.android.activityDetails {
  padding-bottom: 100px !important;
}

.android.activityDetails .activityBtnWrap {
  bottom: 80px;
}

.enrol-from .from-row {
  margin-top: 10px;
}

.enrol-from .from-row input,
select {
  display: block;
  height: 45px;
  background: #fff;
  border: 1px solid #f5f5f5;
  outline: none;
  font-size: 15px;
  padding-left: 10px;
  width: 100%;
  box-sizing: border-box;
}

.mallGoodsList {
  padding: 15px 0;
  margin-top: 10px;
}

.mallGoodsList ul {
  margin-top: 10px;
  overflow: hidden;
  padding: 2.5px;
}

.mallGoodsList ul li {
  width: 50%;
  float: left;
  padding: 0 2.5px;
  box-sizing: border-box;
  margin-bottom: 5px;
}

.mallGoodsList ul li .A-goods-merchandise {
  height: 38px;
  line-height: 1.5;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mallGoodsList ul li img {
  display: block;
}

.mallGoodsList ul li .mallItem {
  background: #fff;
}

.mallGoodsList ul li .mallItem .A-coods-name {
  position: absolute;
  bottom: 0;
  color: #fff;
  width: 100%;
  text-align: center;
  line-height: 20px;
  background-image: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.3)
  );
}

.apList {
  padding: 20px 15px;
}

.apList dl {
  margin-top: 20px;
}

.apList dl dt {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}

.apList dl dd {
  color: #666;
  line-height: 1.5;
  font-size: 14px;
}

.activity-title {
  font-size: 16px;
  color: #232323;
  text-align: center;
  padding: 0 15px;
  position: relative;
  margin-top: 15px;
}

.activity-title .Tline {
  left: 0;
  top: 6px;
  display: inline-block;
  height: 6.5px;
  width: 70px;
  background: url(../../assets/images/info/line.png) no-repeat;
  vertical-align: middle;
  margin-right: 10px;
}

.activity-title .Tline:last-child {
  margin-left: 10px;
  margin-right: 0;
}

.activity-sub-title {
  color: #666;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}

.safeguardList {
  margin-top: 20px;
}

.mallShopList {
  overflow: hidden;
  background: #f4f6f8;
  padding-top: 20px;
  padding-bottom: 20px;
}

.mallShopList ul {
  margin-top: 10px;
  padding: 2.5px;
  overflow: hidden;
}

.mallShopList ul li {
  width: 100%;
  float: left;
  padding: 2.5px;
  box-sizing: border-box;
}

.mallShopList ul li img {
  display: block;
  padding: 2.5px;
  box-sizing: border-box;
}

.mcShopList {
  background: #e5e8ec;
  overflow: hidden;
  padding: 15px 0;
}

.mcShopList ul {
  margin-top: 15px;
  overflow: hidden;
}

.mcShopList ul li {
  width: 33.333%;
  float: left;
}

.cate {
  height: 30px;
  border: 1px solid #f32933;
  line-height: 30px;
  border-radius: 3px;
  margin: 20px 15px;
  background: #fff;
}

.cate span {
  display: block;
  background: #f32933;
  color: #fff;
  padding: 0 15px;
  border-radius: 3px 0 0 3px;
}

.cate .wfl {
  font-size: 12px;
  color: #666;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activiy-about {
  padding: 20px 15px;
}

.activiy-about .about-title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.activiy-about .about-sub-title {
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  color: #797979;
}

.activiy-about .about-wrap {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.activiy-about .about-wrap p {
  text-indent: 2rem;
  margin-bottom: 10px;
}

.activityBtnWrap {
  overflow: hidden;
  height: 46px;
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 100%;
}

.activityBtnWrap .btn-blcok {
  height: 46px;
  width: 50%;
  display: block;
  float: left;
  box-sizing: border-box;
  border-radius: 0;

  color: #fff;
}

.jionlist {
  height: 30px;
  overflow: hidden;
  line-height: 30px;
}
.jionlist .anim {
  transition: all 1s;
}
.jionlist .box {
  height: 90px;
  width: 100%;
  text-align: center;
}
.jionlist .tip_box {
  position: relative;
}

.jionlist .tip_box li span {
  padding: 0 5px;
}
.btn-dack {
  background-color: #333;
}
</style>